<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>轮播图js</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        a {
            text-decoration: none;
        }

        .container {
            position: relative;
            width: 500px;
            height: 300px;
            background-color: skyblue;
            overflow: hidden;
        }

        .wrap {
            position: absolute;

            width: 3000px;
            height: 300px;
            background-color: red;
        }

        .wrap img {
            float: left;
            width: 500px;
            height: 300px;
        }

        .container .buttons {
            position: absolute;
            right: 200px;
            bottom: 20px;
            width: 100px;
            height: 10px;

        }

        .container .buttons span {
            display: inline-block;
            width: 20px;
            height: 20px;
            background-color: yellow;
            text-align: center;
            cursor: pointer;
        }

        .container .buttons span.on {
            background-color: red;
        }

        .arrow {
            position: absolute;
            width: 25px;
            height: 25px;
            background-color: green;
            color: black;
            text-align: center;
            line-height: 25px;
            display: none;
        }

        .arr_left {
            left: 0;
            top: 50%;
            transform: translate(0, -50%);
        }

        .arr_right {
            right: 0;
            top: 50%;
            transform: translate(0, -50%);
        }

        .container:hover .arrow {
            display: block;
        }
    </style>


</head>

<body>
    <div class="container">
        <div class="wrap" style="left: -500px">
            <img src="imgs/4.jpg" alt="">
            <img src="imgs/1.jpg" alt="">
            <img src="imgs/2.jpeg" alt="">
            <img src="imgs/3.gif" alt="">
            <img src="imgs/4.jpg" alt="">
            <img src="imgs/1.jpg" alt="">

        </div>
        <div class="buttons">
            <span>1</span>
            <span>2</span>
            <span>3</span>
            <span>4</span>
        </div>

        <a href="javascript:;" class="arrow arr_left">&lt;</a>
        <a href="javascript:;" class="arrow arr_right">&gt;</a>
    </div>




    <script>
        // 获取元素
        var wrap = document.querySelector('.wrap');
        var next = document.querySelector('.arr_right');
        var prev = document.querySelector('.arr_left');

        // 给前后箭头绑定事件
        next.onclick = function () {
            next_pic();
        }
        prev.onclick = function () {
            prev_pic();
        }

        function next_pic() {
            var newLeft;
            if (wrap.style.left === '-2500px') {
                newLeft = -1000;
            } else {
                newLeft = parseInt(wrap.style.left) - 500;
            }
            wrap.style.left = newLeft + 'px';

            // 小圆点相关代码
            index++;
            if (index > 3) {
                index = 0;
            }
            showCurrentDot();
        }

        function prev_pic() {
            var newLeft;
            if (wrap.style.left === '0px') {
                newLeft = -1500;
            } else {
                newLeft = parseInt(wrap.style.left) + 500;
            }
            wrap.style.left = newLeft + 'px';

            // 小圆点相关代码
            index--;
            if (index < 0) {
                index = 3;
            }
            showCurrentDot();
        }

        // 自动播放
        var timer = null; // 声明定时器，以便后面可以清除它
        function autoPlay() {
            timer = setInterval(function () {
                next_pic();
            }, 1000)
        }
        autoPlay();

        // 鼠标移到图片时停止自动播放，移开鼠标继续自动播放
        var container = document.querySelector('.container');
        container.onmouseenter = function () {
            clearInterval(timer); // 清除定时器
        }
        container.onmouseleave = function () {
            autoPlay();
        }

        // 底部小圆圈随图片变化而变化
        var index = 0; // 定义index，为每个小圆点和图片对应的索引号
        var dots = document.querySelectorAll('span');
        // 使当前图片对应的小圆点变色
        function showCurrentDot() {
            // 其余小圆点清除类
            for (var i = 0; i < dots.length; i++) {
                dots[i].className = '';
            }
            // 当前小圆点添加类（当前类on有变色效果）
            dots[index].className = 'on';
        }

        // 点击底部小圆点，跳到对应图片
        for (var i = 0; i < dots.length; i++) {
            (function (i) {
                dots[i].onclick = function () {
                    var dis = index - i;
                    if (index == 3 && parseInt(wrap.style.left) != -2000) {
                        dis = dis - 4;
                    }
                    if (index == 0 && parseInt(wrap.style.left) != -500) {
                        dis = 5 + dis;
                    }
                    wrap.style.left = (parseInt(wrap.style.left) + dis * 500) + 'px';
                    index = i;
                    showCurrentDot();
                }
            })(i);
        }
    </script>
</body>

</html>